<template>
  <div class="img">
    <img
      :src="imgBaseUrl + (url || info.coverImg)"
      alt=""
      width="460"
      height="440"
    />
    <div class="img__min">
      <img
        :src="imgBaseUrl + item.src"
        alt=""
        width="100"
        height="100"
        v-for="(item, index) in info.imgAltas"
        :key="index"
        @mouseenter="changeImg(item.src)"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductImg",
  props: ["info"],
  data() {
    return {
      url: "",
    };
  },
  methods: {
    changeImg(url) {
      this.url = url;
    },
  },
  watch: {
    // 判断传入的数据是否变化, 如果变化清空url,好让新传入的图片显示
    info: {
      deep: true,
      handler() {
        this.url = "";
      },
    },
  },
};
</script>

<style lang='less' scoped>
.img {
  margin-right: 31px;
  & > img {
    margin-bottom: 21px;
  }
  width: 460px;
  display: flex;
  flex-direction: column;
  &__min {
    display: flex;
    width: 460px;
    justify-content: space-between;
    img {
      cursor: pointer;
    }
  }
}
</style>